@import '../../../../css/mobile/components/normalize';
@import '../../../../css/mobile/components/font';
@import '../../../../bower_components/swiper/dist/css/swiper.min.css';

.container {
  line-height: 0;

  img {
    width: 100%;
  }

  .banner {
    width: 610px;
    height: 205px;
    margin: 45px auto 0 auto;
    background-image: url(../img/banner.png);
    background-size: 100% 100%;
    position: relative;

    .person {
      width: 196px;
      height: 68px;
      font-size: 25px;
      line-height: 68px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      position: absolute;
      left: 165px;
    }

    .price-class {
      height: 50px;
      font-size: 36px;
      line-height: 50px;
      font-family: GothamRounded-Medium;
      color: rgba(102, 102, 102, 1);
      vertical-align: top;

      position: absolute;
      top: 84px;
      left: 67px;

      .price {
        font-size: 50px;
        color: rgba(100, 203, 250, 1);
        .yen {
          font-size: 43px;
        }
      }
    }

    .original-price {
      height: 26px;
      font-size: 26px;
      line-height: 26px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);

      position: absolute;
      top: 142px;
      left: 40px;

      .delete {
        text-decoration: line-through;
      }
    }
  }

  .count-person {
    height: 189px;
    text-align: center;
    line-height: 0;
    position: relative;

    .tip {
      width: 110px;
      height: 48px;
      display: block;
      position: absolute;
      top: 6px;
      right: 80px;
    }

    .progress-bar {
      width: 600px;
      height: 30px;
      background: rgba(243, 243, 243, 1);
      border-radius: 15px;
      display: inline-block;
      overflow: hidden;
      position: absolute;
      top: 68px;
      left: 75px;

      .progress {
        width: 0%;
        height: 30px;
        background: rgba(238, 127, 110, 1);
        border-radius: 15px;
        transition: width 0.7s linear 0s;
      }
    }

    .total-num {
      margin-left: 14px;
      height: 30px;
      font-size: 26px;
      line-height: 30px;
      font-family: PingFangSC-Regular;
      display: inline-block;
      vertical-align: top;
      color: #888888;
    }

    .text {
      width: 100%;
      height: 34px;
      font-size: 28px;
      line-height: 34px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      position: absolute;
      top: 138px;
      text-align: center;

      .gray {
        font-size: 24px;
        color: rgba(136, 136, 136, 1);
        font-family: PingFangSC-Regular;
      }
      .red {
        color: rgba(238, 127, 110, 1);
        font-family: PingFangSC-Regular;
      }
    }
  }

  .apply-now {
    width: 600px;
    height: 100px;
    line-height: 100px;
    background: linear-gradient(-11deg, rgba(64, 195, 255, 1) 0%, rgba(113, 213, 255, 1) 100%);
    box-shadow: 0 0 0 0 rgba(64, 195, 255, 0.28);
    border-radius: 16px;
    font-size: 32px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    margin: 0 auto 52px auto;
  }

  .count-down {
    margin: 44px auto 56px auto;
    height: 32px;
    line-height: 50px;
    text-align: center;
    position: relative;

    div {
      display: inline-block;
    }

    .text {
      height: 32px;
      font-size: 28px;
      line-height: 32px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      position: absolute;
      top: 0;
      left: 113px;
    }

    .time {
      width: 244px;
      position: absolute;
      top: 0;
      left: 393px;

      height: 32px;
      font-size: 28px;
      line-height: 32px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(238, 127, 110, 1);
    }

    .bg {
      width: 244px;
      height: 18px;
      background: rgba(255, 249, 182, 1);
      border-radius: 9px;

      position: absolute;
      top: 14px;
      left: 393px;
      z-index: -1;
    }
  }

  .sale-over {
    margin-top: 43px;
    height: 36px;
    font-size: 36px;
    line-height: 36px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(136, 136, 136, 1);
    text-align: center;
  }

  .swiper-container {
    width: 691px;
    height: 377px;
    border: 1px solid rgba(245, 245, 245, 1);
    border-radius: 10px;
    margin: 43px auto 0 auto;
    position: relative;

    .swiper-wrapper {
      .swiper-slide {
        width: 100%;
        height: 100%;
        position: relative;
        display: inline-block;

        .avatar {
          width: 156px;
          height: 156px;
          position: absolute;
          top: 111px;
          left: 50px;
        }
        .name {
          height: 29px;
          position: absolute;
          top: 66px;
          left: 252px;
        }
        .desc {
          width: 387px;
          font-size: 24px;
          font-family: PingFangSC-Light;
          font-weight: 300;
          color: rgba(102, 102, 102, 1);
          line-height: 36px;

          position: absolute;
          top: 128px;
          left: 253px;
        }
      }
    }

    .swiper-pagination {
      width: 130px;
      height: 23px;
      position: absolute;
      left: unset;
      right: 54px;
      bottom: 33px;
      line-height: 0;

      .swiper-pagination-bullet {
        display: inline-block;
        margin: 0 6px;
        width: 23px;
        height: 23px;
        background: rgba(255, 255, 255, 1);
        border: 3px solid rgba(229, 229, 229, 1);
        border-radius: 50%;
        box-sizing: border-box;
        opacity: 1;
        vertical-align: top;

        &.swiper-pagination-bullet-active {
          width: 40px;
          height: 20px;
          margin-top: 1.5px;
          background: rgba(100, 203, 250, 1);
          border: 0;
          border-radius: 10px;
        }
      }
    }
  }
}

.buy-cart {
  width: 200px;
  height: 200px;
  background-image: url(../img/buy-cart.png);
  background-size: 100% 100%;

  position: fixed;
  right: 15px;
  bottom: 15px;
}

.buy-bottom-bar {
  width: 100%;
  height: 206px;

  position: fixed;
  bottom: 0;
  z-index: 1;

  .bg {
    width: 100%;
    height: 100%;
  }

  .start-date {
    position: absolute;
    top: 129px;
    left: 236px;
    width: 210px;
    height: 26px;
    font-size: 26px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(247, 250, 253, 1);
    line-height: 26px;
  }

  .buy-btn {
    position: absolute;
    right: 57px;
    bottom: 24px;

    width: 230px;
    height: 82px;
    background: rgba(255, 255, 255, 1);
    border-radius: 41px;

    font-size: 32px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(100, 203, 250, 1);
    line-height: 82px;

    text-align: center;
  }

  .count-down {
    width: 270px;
    position: absolute;
    bottom: 19px;
    right: 27px;
    text-align: center;

    .text {
      height: 24px;
      font-size: 24px;
      line-height: 24px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
    .time {
      margin-top: 14px;
      display: inline-block;
      width: 270px;
      height: 51px;
      font-size: 28px;
      line-height: 51px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      background: linear-gradient(180deg, rgba(78, 180, 248, 0.7) 100%, rgba(107, 197, 252, 0.7) 100%);
      border-radius: 10px;
    }
  }
}